<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#/one">1</a>
    <a href="#/two">2</a>
    <div class="router-view">
    </div>
   

</body>
<script>
    var onePage = {
        template: `<h1>one</h1>`
    }

    var twoPage = {
        template: `<h1>two</h1>`
    }

    var link = [
        { path: '/one', page: onePage },
        { path: '/two', page: twoPage },
    ]

    window.onhashchange = function () {
        let path = window.location.hash.replace("#", "")
        let cName = path.replace("/", "")
        console.log(path);
        let currentPath =  link.filter(v => {
            if (v.path == path) {
                return v
            }
        })
        $(".router-view").innerHTML += `
         <div class="${cName}"></div>
        `

        $(`.router-view .${cName}`).innerHTML = currentPath[0].page.template
    }

    function $(className) {
        return document.querySelector(className)
    }
</script>
</html>